import React, { useEffect, useState } from 'react'
import { observer } from 'mobx-react-lite'
import styles from './addDefence.less'
import { Button, Form, Input, Space, Select, DatePicker } from 'antd'
import { SaveOutlined } from '@ant-design/icons'
import useStore from '@/context/useStore'
import moment from 'moment'
import { Link, IRouteComponentProps } from 'umi'
import { IDefenceAddItem } from '@/utils/interface'
import { Cascader } from 'antd';
import ClassPlanInit from '@/components/ClassPlanInit'

const { RangePicker } = DatePicker;


const AddDefence: React.FC<IRouteComponentProps> = ({ history, location, match }) => {

    // 从url参数中获取defenceId
    let defenceId = location.query.defenceId

    // 获取仓库的tags模块
    let { tags } = useStore()
    //组件创建时调用获取班级列表
    useEffect(() => {
     tags.getClassPlanTree()
    }, [])
    // 创建表单实例
    const [form] = Form.useForm()
    const [times, settimes] = useState<string[]>([])
    useEffect(() => {
        if (defenceId) {
            tags.getTagsDetail(defenceId as string)
        }
    }, [defenceId])

    useEffect(()=>{
        form.setFieldsValue({
            ...tags.defenceAddItem
        })
    },[tags.defenceAddItem])



    async function addDefence(res: IDefenceAddItem) {
        // console.log(1)
        // form.setFieldsValue({
        //     ...tags.defenceAddItem,
            
        // })
        // console.log({...res,time:times,defenceCreateTime: times[0] , defenceEndTime: times[1] });

        let defenceId = await tags.addDefence({...res,time:times,defenceCreateTime: times[0], defenceEndTime: times[1],defenceClassId:"9"})
        // console.log(defenceId)
        history.replace(`/teachers/addDefence?defenceId=${defenceId}`)
    }

    const onChange = (value: any, dateString: any) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        settimes(dateString)
    }
    const CascaderonChange=(value:any)=>{
        console.log(value);
        tags.changclassplan(value)
    }
    


    return <div className={styles.content}>
        <div className={styles.head}>
            <span style={{ color: '#80879b' }} >答辩</span>
            <span style={{ color: '#C0C4CC' }}>/</span>
            <span style={{ color: '#303849' }}>发起答辩</span>
        </div>
        <div className={styles.main}>
            {/* 标题 */}
            <div className={styles.addProject_title}>
                <h3>发起答辩</h3>
                <div className={styles.top_right}>
                    <Link to='/teachers/defence'>
                        <Button type="primary" className={styles.button}>返回</Button>
                    </Link>
                    <Button type="primary" className={styles.primary_button}>提交</Button>
                </div>
            </div>
            <div className={styles.addtask_detail}>
                <Form className={styles.el_form} form={form}
                    key={JSON.stringify(tags.defenceAddItem)}
                    initialValues={{ ...tags.defenceAddItem }}
                    onFinish={addDefence}
                >
                    <h3 className={styles.header2}><Button type="text" icon={<SaveOutlined />} htmlType="submit">保存</Button></h3>
                    <div className={styles.el_input}>
                        <Form.Item name='degenceName' label="答辩名称" rules={[{ required: true }]}>
                            <Input placeholder='请输入答辩名称' className={styles.input} />
                        </Form.Item>
                        <Form.Item name='defenceMajorId' label="专业" rules={[{ required: true, message: "请选择专业" }]}>
                            <Select className={styles.input}>{
                                tags.defenceTags.map(item => {
                                    // console.log( item)
                                    return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                                })
                            }</Select>
                        </Form.Item>
                    </div>
                    <Form.Item name='time' label="答辩时间" >
                        <Space direction="vertical" size={12} >
                        
                            <RangePicker
                                showTime={{
                                    hideDisabledOptions: true,
                                    // defaultValue: [moment(tags.defenceAddItem.defenceCreateTime?tags.defenceAddItem.defenceCreateTime:null), moment(tags.defenceAddItem.defenceEndTime)],
                                    // defaultValue:{moment(2021-06-17 20:00:00)}
                                    // defaultValue:{}
                                }}
                                // value={[
                                //         moment(tags.defenceAddItem.defenceCreateTime,"YYYY-MM-DD"),
                                //         moment(tags.defenceAddItem.defenceEndTime,"YYYY-MM-DD"),
                                // ]}
                                format="YYYY-MM-DD HH:mm:ss"
                                onChange={onChange}
                                 
                            />
                        </Space>
                    </Form.Item>
                    <div className={styles.el_input}>
                        <Form.Item name='classplan' label="班级/计划"  rules={[{ required: true, message: "请选择" }]}>
                            <Cascader options={tags.classPlanTree}   onChange={(value) => { CascaderonChange(value) }} placeholder="请选择" />
                        </Form.Item>
                        <Form.Item name='defenceAdress' label="答辩地址" rules={[{ required: true }]}>
                            <Input placeholder='请输入地址' className={styles.input} />
                        </Form.Item>
                    </div>
                </Form>
                <div className={styles.p}>
                    <h3>发起人</h3>
                    <p>郭老师</p>
                </div>
            </div>
        </div>
        <section>
            {
                defenceId ? <ClassPlanInit defenceId={defenceId} /> : null
            }
        </section>
    </div>
}
export default observer(AddDefence)